<template>
    <div class="u-scroll_row">
        <ul class="scrollList">
            <li :class="{'on': value[match] == item[match]}" v-for="(item,index) in list" :key="index" @click="chose(item,index)">
                {{item[label]}}
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    name: 'UScrollRow',
    componentName: 'UScrollRow',
    inheritAttrs: false, 
    props: {
        value: {},
        list: {},
        label: {},
        match: {},
    },
    data() {
        return {             
        }
    },  
    created() {

    },
    computed: {

    },
    mounted() {
    },
    methods: {
        chose(item,index){
            this.$emit('input', item) 
            this.$emit('change', item);
        },
    }
};
</script>
<style lang="scss" scoped>
.u-scroll_row{
    width: 100%; height: 1rem;
    background: #fff;
    position: relative;
    &::after{
        content: "";
        position: absolute; right: 0; top: 0;
        width: 1.2rem; height: 1rem;
        background: linear-gradient(to right, rgba($color: #fff, $alpha: 0) 0%, #fff 100%);;
    }
    .scrollList{
        padding: 0.22rem 0 .1rem;
        overflow: hidden;
        overflow-x: auto;
        white-space: nowrap;
        li{
            padding: 0 .35rem; 
            height: .68rem; line-height: .68rem;
            border-radius: .68rem;
            background: #eff1f3;
            font-size: .3rem; color: #999999;
            font-weight: bold;
            display: inline-block;
            margin: 0 .2rem;
            &.on{
                background: #05b3b6; 
                color: #fff;
            }
        }
    }
}
</style>